<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
<!--    <script src="https://api.map.baidu.com/api?v=3.0&ak=hWkxFDoXuntqSF3zKC8H2dUO6cOwNXfR"></script>-->
    <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=hWkxFDoXuntqSF3zKC8H2dUO6cOwNXfR"></script>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        window.onload = function () {
            const {createApp, ref, onMounted} = Vue

            createApp({
                setup() {

                    const distance = ref(0)
                    const duration = ref(0)

                    // axios.get("https://api.map.baidu.com/directionlite/v1/driving?origin=112.647242,37.804341&destination=112.61066800000003,37.79153700000001&ak=hWkxFDoXuntqSF3zKC8H2dUO6cOwNXfR")
                    //     .then(response =>{
                    //         console.log(response.data)
                    //     })

                    onMounted(() => {
                        // let map = new BMap.Map("map-container");
                        // const point = new BMap.Point(112.647242, 37.804341);
                        // map.centerAndZoom(point, 15);
                        // map.enableScrollWheelZoom(true);
                        const map = new BMap.Map("map-container"); // 如果不需要地图容器，可以不创建Map对象，但需要确保百度地图库已经加载
                        const start = new BMap.Point(112.647242, 37.804341);
                        const end = new BMap.Point(112.61066800000003, 37.79153700000001);
                        distance.value = (map.getDistance(start, end) / 1000).toFixed(2)
                        // duration.value =  map.getDuration(start, end)
                        // const driving = new BMap.DrivingRoute(map, {
                        //     renderOptions: {autoViewport: true}, // 不渲染到地图上，只计算路线信息
                        //     onSearchComplete: () => {
                        //         if (driving.getStatus() === BMAP_STATUS_SUCCESS) {
                        //             const plan = driving.getResults().getPlan(0); // 获取第一个方案
                        //             distance.value = plan.getDistance(true); // 获取距离，单位米
                        //             duration.value = plan.getDuration(true); // 获取时间，单位分钟
                        //         } else {
                        //             alert('路线规划失败');
                        //         }
                        //     }
                        // });
                        // map.centerAndZoom(new BMap.Point(112.647242, 37.804341), 15);
                        // driving.search(start, end); // 发起路线规划检索请求






                        // let map = new BMapGL.Map("map-container");
                        // map.centerAndZoom(new BMapGL.Point(112.647242, 37.804341), 12);
                        //
                        // let searchComplete = function (results){
                        //     if (transit.getStatus() != BMAP_STATUS_SUCCESS){
                        //         return ;
                        //     }
                        //     let plan = results.getPlan(0);
                        //     duration.value = plan.getDuration(true);                //获取时间
                        //     distance.value = plan.getDistance(true);             //获取距离
                        // }
                        //
                        // let transit = new BMapGL.DrivingRoute(map, {renderOptions: {map: map},
                        //     onSearchComplete: searchComplete,
                        //     onPolylinesSet: function(){
                        //         setTimeout(function(){alert(output)},"1000");
                        //     }});
                        //
                        // let start=new BMapGL.Point(112.647242, 37.804341);
                        // let end=new BMapGL.Point(112.61066800000003, 37.79153700000001);
                        //
                        //
                        // transit.search(start, end);
                    })

                    return {distance,duration}
                }
            }).mount('#app')
        }
    </script>
</head>
<body>
<div id="app">
    <div id="map-container" style="width: 100%; height: 800px;"></div>
    距离：{{distance}} 时间：{{duration}}
</div>
</body>
</html>
